<!--
用于显示服务端返回的errorList,这个组件放在q-app这个div下方,整个程序就一个
-->

<template>
  <q-dialog v-model="showing" persistent transition-show="none" transition-hide="none" @before-hide="$d.activating = false">
    <q-card style="max-width: 800px; width: 800px">
      <q-card-section class="q-pa-sm">
        <div class="text-h6">{{caption}}</div>
      </q-card-section>
      <q-separator />
      <q-banner dense inline-actions :class="bannerClass">
        {{msg}}
      </q-banner>
      <q-scroll-area class="q-ma-sm" style="height: 281px" :visible="true">
        <q-table class="simple-border" flat hide-header hide-bottom dense :rows="$d.errorList" :columns="columns"
          row-key="no"
          :pagination="{page:1,rowsPerPage:0}" separator="cell" wrap-cells></q-table>
      </q-scroll-area>
      <q-separator />
      <q-card-actions align="right">
        <q-btn color="primary" @click="onOkButtonClick" :disable="isButtonDisabled" :loading="$d.activating"
          v-if="$d.showBtn">{{$t($d.btnLabel)}}
          <template v-slot:loading>
            <q-spinner />&nbsp;{{$t($d.btnLabel)}}
          </template>
        </q-btn>
        <q-btn v-close-popup unelevated color="primary" :label="$t('关闭')" outline />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
export default {
  name: 'errorListDisplay',
}
</script>

<script lang="ts" setup>
import _ from 'lodash'
import {computed, reactive, ref} from 'vue'
import {ErrorListDisplayParams} from '../defs/comm'
import {useI18n} from 'vue-i18n'

// 对话框是否显示着
const showing = ref(false)

// 标题
const caption = ref('')

// 总的错误文本信息 通常来自resp.msg
const msg = ref('')

// 将错误显示为警告(显示黄色banner)
const showAsWarning = ref(false)

const bannerClass = computed(() => {
  return 'text-white q-ma-sm ' + (showAsWarning.value ? 'bg-warning' : 'bg-red')
})

interface ErrorItemForDisp {
  // 编号1,2,3...
  no: number,
  // 错误信息
  err: string
}

const {t} = useI18n()

// 数据
const $d = reactive({
  // 错误信息列表 来自resp.errorList
  errorList: [] as ErrorItemForDisp[],
  btnLabel: '确定',
  activating: false,
  showBtn: false,
  // 回调方法，参数带入
  callback: null as ((setResult: (success: boolean, errMsg?: string) => void) => void) | null
})

// 表格列定义
const columns = [
  {name: 'no', align: 'right', field: 'no', style: 'width: 50px'},
  {name: 'err', align: 'left', field: 'err'},
]

// 直接关闭对话框
const hideErrorList = function () {
  showing.value = false
  $d.btnLabel = '确定'
  $d.activating = false
  $d.showBtn = false
}

const isButtonDisabled = computed(() => $d.activating)
const onOkButtonClick = function () {
  if ($d.activating) {
    return
  }
  $d.activating = true
  if (typeof $d.callback === 'function') {
    $d.callback(setResult)
  }
}

const setResult = function (success: boolean) {
  if (success) {
    hideSingleInputBox()
  }
}

const hideSingleInputBox = function () {
  $d.activating = false
  showing.value = false
}

// 弹出错误提示框
const showErrorList = function (params: ErrorListDisplayParams, title?: string, showBtn?: boolean, btnLabel?: string, callback?: (() => void) | null) {
  caption.value = title ?? t('出错了')
  msg.value = params.msg ?? t('服务器返回以下错误，请核对后重试')
  showAsWarning.value = params.showAsWarning ?? false
  if (showBtn) {
    $d.showBtn = showBtn
  }
  if (btnLabel) {
    $d.btnLabel = btnLabel
  }
  if (params.errorList && params.errorList.length > 0) {
    $d.errorList = _.map(params.errorList, function (s, idx) {
      return {no: idx + 1, err: s}
    })
  } else {
    $d.errorList = [{no: 1, err: t('(未知错误)')}]
  }
  if (callback)
    $d.callback = callback
  showing.value = true
}

$f.ui.hideErrorListDlg = hideErrorList
$f.ui.showErrorListDlg = showErrorList

</script>
